<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息">
            <a-row :gutter="48">
              <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUser">
                  <select-user-by-dep disabled :multi="false" v-model="model.applyUser"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUserDept">
                  <j-select-depart v-model="model.applyUserDept" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyDate">
                  <a-input :disabled="true" v-model="model.applyDate"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="48">
              <a-col :span="8">
                <a-form-model-item label="会议室名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roomName">
                  <div id="roomName">
                    <a-tooltip>
                      <template slot="title">
                        查看会议室详情
                      </template>
                      <a @click="handleShowRoomDetail()">{{ model.roomName }}</a>
                    </a-tooltip>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="administrator">
                  <select-user-by-dep disabled :multi="false" v-model="model.administrator"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="使用用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="usePurpose">
                  <j-dict-select-tag :disabled="formDisabled" type="list" v-model="model.usePurpose" dictCode="	meeting_room_use_purpose" placeholder="请选择使用用途"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="参会人数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="attendanceNum">
                  <a-input-number :disabled="formDisabled" v-model="model.attendanceNum" :min="1" :max="capacity" placeholder="请输入参会人数" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="预定日期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reservationDate">
                  <a-range-picker
                    format="YYYY-MM-DD HH:mm"
                    :placeholder="['预计开始时间', '预计结束时间']"
                    v-model="model.reservationDate"
                    :getCalendarContainer="node => node.parentNode"
                    @change="handleChangeRangeDate"
                    :minute-step="15"
                    :second-step="10"
                    style="width: 100%"
                    :show-time="{ format: 'HH' }"
                    :disabled-date="disabledDate"
                  >
                  </a-range-picker>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="3">
                <a-form-model-item label="预定开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="beginTime">
                  <a-time-picker
                    format="HH:mm"
                    :hourStep="1"
                    :minuteStep="60"
                    :disabledHours="() => disabledHours"
                    :hideDisabledOptions="true"
                    :open="beginTimeOpen"
                    v-model="beginTime"
                    :allowClear="false"
                    @change="handleChangeBeginTime"
                    @openChange="(open) => beginTimeOpen = open"
                    style="width: 200%;">
                    <a-button slot="addon" size="small" type="primary" @click="() => beginTimeOpen = false">
                      确定
                    </a-button>
                  </a-time-picker>
                </a-form-model-item>
              </a-col>
              <a-col :span="3" style="margin-left: 15px">
                <a-form-model-item label="预定结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
                  <a-time-picker
                    format="HH:mm"
                    :hourStep="1"
                    :minuteStep="60"
                    :disabledHours="() => disabledHours"
                    :hideDisabledOptions="true"
                    :open="endTimeOpen"
                    v-model="endTime"
                    :allowClear="false"
                    @change="handleChangeEndTime"
                    @openChange="(open) => endTimeOpen = open"
                    style="width: 200%;">
                    <a-button slot="addon" size="small" type="primary" @click="() => endTimeOpen = false">
                       确定
                    </a-button>
                  </a-time-picker>
                </a-form-model-item>
              </a-col> -->
            </a-row>
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item label="会议主题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meetingTheme">
                  <a-input :disabled="formDisabled" v-model="model.meetingTheme" :maxLength="200" placeholder="请输入会议主题" ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item label="会前准备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meetingPrepare">
                  <a-textarea :disabled="formDisabled" v-model="model.meetingPrepare" rows="4" :maxLength="500" placeholder="请输入会前准备" ></a-textarea>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea :disabled="formDisabled" v-model="model.remark" rows="4" :maxLength="500" placeholder="请输入备注" ></a-textarea>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="附件信息">
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item label="附件信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="attachment">
                  <j-upload :disabled="formDisabled" :buttonVisible="!formDisabled" v-model="model.attachment"></j-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </j-form-container>

    <erp-meeting-room-modal ref="roomModalForm"></erp-meeting-room-modal>
  </a-spin>
</template>

<script>
import { httpAction,deleteAction } from '@/api/manage'
import moment from 'moment'
import ErpMeetingRoomModal from './ErpMeetingRoomModal'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import { mapGetters } from 'vuex';

export default {
  name: 'ErpMeetingReservationForm',
  components: {
    ErpMeetingRoomModal, SelectUserByDep
  },
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  watch: {
    activeKey(key) {
      this.$forceUpdate()
    }
  },
  data () {
    return {
      moment,
      model: {
        applyDate: ''
      },
      beginDate: '', // 选择的日期
      activeKey: ['1', '2'],
      labelCol: {
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      confirmLoading: false,
      validatorRules: {
        usePurpose: [
          { required: true, message: '请输入使用用途！' }
        ],
        attendanceNum: [
          { required: true, message: '请输入参会人数！' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!' }
        ],
        meetingTheme: [
          { required: true, message: '请输入会议主题！' }
        ],
        reservationDate: [
          { required: true, message: '请选择预定日期时间' }
        ]
      },
      url: {
        add: '/api/erp/oa/meeting/erpMeetingReservation/add',
        edit: '/api/erp/oa/meeting/erpMeetingReservation/edit',
        queryById: '/api/erp/oa/meeting/erpMeetingReservation/queryById',
        cancel: '/api/erp/oa/meeting/erpMeetingReservation/delete'
      },
      // beginTime: undefined,
      // beginTimeOpen: false,
      // endTime: undefined,
      // endTimeOpen: false,
      // disabledHours: [0, 1, 2, 3, 4, 5, 6, 22, 23],
      roomInfo: {},
      capacity: 0
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
    // userInfo() {
    //   return this.$store.getters.userInfo
    // }
  },
  created () {
     // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    ...mapGetters(['userInfo']),

    // 禁用日期
    disabledDate(current) {
      var endDate = moment(this.beginDate).add(1, 'days')
      return current && (current > moment(endDate) || current < moment(this.beginDate))
    },
    add (record, roomInfo) {
      console.log(record, roomInfo);
      this.edit(this.modelDefault);
      this.model.applyUser = this.userInfo().empId
      // 当前登录人部门
      this.beginDate = record.beginDate // 选择的当前日期
      this.model.applyUserDept = this.userInfo().deptId;
      this.model.roomId = record.id
      this.model.roomName = record.roomName
      this.model.administrator = record.administrator
      this.capacity = record.capacity
      var begin = record.beginDate + '' + record.beginTime
      var end = record.endDate + '' + record.endTime
      this.$set(this.model, 'reservationDate', [moment(begin, 'YYYY-MM-DD HH:mm'), moment(end, 'YYYY-MM-DD HH:mm')])
      this.model.beginDate = record.beginDate
      this.model.endDate = record.endDate
      // this.beginTime = moment(record.beginTime, 'HH:mm')
      // this.endTime = moment(record.endTime, 'HH:mm')
      this.model.beginTime = record.beginTime + ':00'
      this.model.endTime = record.endTime + ':00'
      this.$set(this.model, 'applyDate', moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))
      this.roomInfo = roomInfo
    },
    edit (record, roomInfo) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.beginDate = record.beginDate // 选择的当前日期
      this.model.roomId = record.roomId
      this.model.roomName = record.roomName
      this.model.administrator = record.administrator
      this.model.applyDate = record.applyDate
      var begin = record.beginDate + '' + record.beginTime
      var end = record.endDate + '' + record.endTime
      this.$set(this.model, 'reservationDate', [moment(begin, 'YYYY-MM-DD HH:mm'), moment(end, 'YYYY-MM-DD HH:mm')])
      // this.beginTime = moment(record.beginTime, 'HH:mm')
      // this.endTime = moment(record.endTime, 'HH:mm')
      this.roomInfo = roomInfo
      this.capacity = record.capacity
      this.visible = true
    },
    submitForm () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }
      })
    },
    handleChangeRangeDate (dates, dateStrs) {
      this.model.beginDate = dateStrs[0].split(' ')[0]
      this.model.endDate = dateStrs[1].split(' ')[0]
      this.model.beginTime = dateStrs[0].split(' ')[1] + '00:00'
      this.model.endTime = dateStrs[1].split(' ')[1] + '00:00'
    },
    handleShowRoomDetail () {
      this.$refs.roomModalForm.edit(this.roomInfo);
      this.$refs.roomModalForm.title = '会议室详情';
      this.$refs.roomModalForm.disableSubmit = true;
    },
    // 取消会议
    cancel(){
      if(!!this.model.id){
        deleteAction(this.url.cancel,{id:this.model.id}).then(res=>{
          if(res.success){
            this.$message.success("取消成功!")
            this.$emit('canceled',1)
          }
        }).catch(()=>{
          this.$message.warning("取消失败，请重试!")
          this.$emit('canceled',0)
          console.log("取消失败")
        })
      }
    }
    // handleChangeBeginTime (time, timeStr) {
    //   this.model.beginTime = timeStr + ':00'
    // },
    // handleChangeEndTime (time, timeStr) {
    //   this.model.endTime = timeStr + ':00'
    // }
  }
}
</script>

<style scoped lang="less">
#roomName {
  width: 202px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #fafafa;
  opacity: 1;
  margin-top: 3px;
  padding-left: 10px;
  line-height: 34px;
}
</style>
